<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>

  <img id="img" src="img/1.png" width="100%" height="399">

  <script>
    /**
     * 分析：
     *    1.在页面上使用 img 标签展示图片
     *    2.定义一个方法，修改图片对象的 src属性
     *    3.定义一个定时器，每隔 3 秒调用方法一次
     */

    var img = document.getElementById("img");
    var number = 1;
    setInterval(fun,3000);

    function fun() {
      if(number > 3){
        number = 1;
      }
        img.src="img/"+number+".png";
        number++;
    }

  </script>

</body>
</html>